---
type: tutorial
title: 自分に関する動的なコンテンツを追加する
description: |-
  「初めてのAstroブログ」チュートリアル -
  Astroページで変数と条件付きレンダリングを使用する
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

HTMLコンテンツをもつ複数ページのウェブサイトができたので、動的なHTMLを追加しましょう！

<PreCheck>
  - ページのタイトルをフロントマターで定義し、HTMLで使用する
  - HTML要素を条件に応じて表示する
  - 自分に関するコンテンツを追加する
</PreCheck>

HTMLファイルであればAstro言語として有効です。しかし、Astroでは通常のHTML以上のことができます！

## 変数を定義して使用する

`about.astro`を開くと、以下のようになっているはずです。

```astro title="src/pages/about.astro"
---
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>
    <h1>私について</h1>
    <h2>... そして私の新しいAstroサイトについて！</h2>

    <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>

    <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
  </body>
</html>
```

<Steps>
1. 以下のJavaScriptをフロントマターの**コードフェンス**の間に追加します。

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "私について";
    ---
    ```

2. HTML内の静的な「Astro」というタイトルと「私について」という見出しを、動的な変数`{pageTitle}`に置き換えます。

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">ホーム</a>
        <a href="/about/">概要</a>
        <a href="/blog/">ブログ</a>
        <h1>私について</h1>
        <h1>{pageTitle}</h1>
        <h2>... そして私の新しいAstroサイトについて！</h2>

        <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>

        <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
      </body>
    </html>
    ```

3. `/about`ページのライブプレビューを更新します。
  
    ページ内のテキストは変化せず、一方でブラウザのタブに表示されるページタイトルが「Astro」から「私について」に変わっているはずです。

    `.astro`ファイル内の2箇所で、HTMLタグに直接テキストを入力する代わりに、**変数を定義して使用**したのです。

4. 同様にして、`index.astro`（「ホームページ」）と`blog.astro`（「私のAstro学習ブログ」）で`pageTitle`を作成して使用しましょう。各ページのHTMLを2箇所ずつ更新し、ページタイトルが各ページに表示される見出しと一致するようにします。
</Steps>

:::note[要点]
1. JavaScriptまたはTypeScriptの式により、Astroスクリプト内で変数を**定義**します。
2. Astroテンプレート内で変数を波括弧`{ }`で囲んで**使用**すると、AstroにJavaScriptを使用していることを伝えられます。
:::

## AstroでJavaScriptの式を書く

<Steps>
1. 以下のJavaScriptを、**コードフェンス**の間のフロントマターに追加します。

      （コードを変更しても構いませんが、このチュートリアルでは以下の例を使用します。）

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "私について";

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];
    ---
    ```

2. 続いて、HTMLテンプレートの既存コンテンツの下に以下のコードを追加します。

    ```astro title="src/pages/about.astro"
    <p>以下は私に関するいくつかの事実です。</p>
    <ul>
      <li>私の名前は{identity.firstName}です。</li>
      <li>{identity.country}に住んでおり、{identity.occupation}として働いています。</li>
      {identity.hobbies.length >= 2 && 
        <li>私の2つの趣味は{identity.hobbies[0]}と{identity.hobbies[1]}です。</li>
      } 
    </ul>
    <p>私のスキルは以下の通りです。</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[要点]
1. Astroテンプレートを書くのは**HTMLを書く**のと非常に似ていますが、JavaScriptの式を含めることができます。
2. AstroフロントマターにはJavaScriptのみが含まれます。
3. `.astro`ファイルのどちらのセクションでも、JavaScriptのすべてのモダンな**論理演算子**、**式**、**関数**を使用できます。ただし、波括弧はHTMLテンプレートボディでのみ必要です。
:::

<Box icon="question-mark">

### 確認テスト

1. `.astro`ファイルのフロントマターで使用される言語はどれですか？

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. HTMLに加えて、Astro構文に含めることができるのは何ですか？

    <MultipleChoice>
        <Option isCorrect>JavaScriptの論理演算子、式、関数</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. JavaScriptを波括弧で囲む必要があるのはいつですか？
    <MultipleChoice>
        <Option>
          正しいかどうかわからないとき。
        </Option>
        <Option isCorrect>
          AstroコンポーネントのHTMLテンプレートセクション内。
          </Option>
        <Option>
          Astroコンポーネントのコードフェンスの間。
        </Option>
    </MultipleChoice>
</Box>

## 条件に応じて要素をレンダリングする

スクリプト変数を使用して、HTML`<body>`コンテンツの個々の要素をレンダリング**するかどうか**の選択も可能です。

<Steps>
1. **変数を定義**するために、フロントマターに以下の行を追加します。

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "私について";

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. 既存の段落の下に以下の行を追加します。

    そして、ブラウザタブのライブプレビューから、ページに表示されている内容を確認します。

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>I am happy to be learning Astro! Astroを学べて幸せです！</p>}

    {finished && <p>I finished this tutorial! このチュートリアルを終えました！</p>}

    {goal === 3 ? <p>My goal is to finish in 3 days. 3日で終えるのが目標です。</p> : <p>My goal is not 3 days. 3日が目標ではありません。</p>}
    ```

3. 作業を進める前に、変更をGitHubにコミットします。作業を保存してウェブサイトを更新したいときは、常にこれをおこなうようにしましょう。
</Steps>

:::tip
Astroのテンプレート構文はJSX構文に似ています。HTMLでスクリプトを使用する方法がわからない場合は、JSXでのやり方を検索するのが良い出発点になるでしょう！
:::



<Box icon="question-mark">

### パターンを分析する

以下の`.astro`スクリプトが与えられたとします。

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "ブーツ";
const student = false;
---
```


以下の各Astroテンプレート式について、ブラウザに送信されるHTML（もしあれば）を予測できますか？正しく予測できたかどうか、クリックして確認してください！

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>私はまだ学生です。</p>}`

    <p>
      <Spoiler>`student`はfalseに評価されるため、何も表示されません。</Spoiler>
    </p>

3.  `<p>私は{quantity + 8}足の{footwear}を持っています。</p>`

    <p>
      <Spoiler>`<p>私は11足のブーツを持っています。</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>私はMacを使っています。</p> : <p>私はMacを使っていません。</p>}`

    <p>
      <Spoiler>`<p>私はMacを使っていません。</p>`</Spoiler>
    </p>
</Box>

<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] `.astro`ファイル内で値を定義し、使用できる。
- [ ] HTML要素を条件に応じてレンダリングできる。
</Checklist>
</Box>


### 参考

- [Astroにおける動的な式](/ja/basics/astro-syntax/#jsxライクな式)
